<template>
	<view>
    <!-- 商品列表 -->
		<view class="goods-list">
      <!-- 商品列表的每个item项 封装了一个自定义组件 将item过去-->
      <view v-for="(item, index) in goodsList" :key="index" @click="gotoDetail(item)">
        <my-goods :item="item"></my-goods>
      </view>
		 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        total: 10, // 总共的条数，用于分页
				// 定义请求参数对象
        queryObj: {
          query: '', // 查询关键字
          cid: '', // 分类ID
          pagenum: 1, // 页码，默认第一页
          pagesize: 10 //每页显示的条数
        },
        goodsList: [], // 商品列表的数据
        flag: false
			};
		},
    
    // 导航跳转到商品列表页有三种方式：首页点击商品图片跳转(路径参数query)，搜索页的点击历史记录跳转(拼接了参数query)，分类业的点击商品跳转(拼接了参数cid)
    onLoad(options) { // 页面导航跳转的url路径后拼接的参数，可在onload生命周期的参数中接收到
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      // 获取 商品列表 的数据
      this.getGoodsList()
    },
    methods:{
      // 商品列表 的数据
      async getGoodsList(cd){
        this.flag = true
       const { data } = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
       this.flag = false // 请求发送完后就立即关闭节流阀 无论状态码是否为200
       if(data.meta.status !== 200) return uni.$showMsg()
       this.goodsList = [...this.goodsList, ...data.message.goods]
       this.total = data.message.total
       // uni.stopPullDownRefresh() // 下拉后，要关闭下拉刷新效果，但不能直接写在这里
       cd && cd() // getGoodsList方法被人调用时 是否有传递参数 如果有，就调用参数（参数是一个函数，函数的函数体为关闭下拉刷新）
       console.log(data)
      },
    
    // 点击跳转到 商品详情页面
    gotoDetail(item){
      uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
      })
    }
    },
    
    // 上拉触底 事件
    onReachBottom(){
      if(this.flag || this.queryObj.pagenum * this.queryObj.pagesize > this.total) return
      this.queryObj.pagenum = this.queryObj.pagenum + 1
      this.getGoodsList()
    },
    
    // 下拉刷新 事件
    onPullDownRefresh(){
      // 1，重置数据
      this.queryObj.pagenum = 1
      this.total = 0
      this.flag = false // 关闭节流阀
      this.goodsList = []
      // 2，发请求 传递一个函数作为参数
      this.getGoodsList(()=>{
        uni.stopPullDownRefresh() // 关闭下拉刷新
      })
    }
	}
</script>

<style lang="scss">

</style>
